<!--
 * @Description:
 * @Author: 稽辉
 * @Date: 2025-02-26 15:21:11
 * @LastEditTime: 2025-03-17 16:45:05
 * @LastEditors: 稽辉
-->
<template>
  <scroll-view scroll-y style="height: 800rpx">
    <CComment
      ref="ccRef"
      v-model:myInfo="myInfo"
      v-model:userInfo="userInfo"
      v-model:tableData="tableData"
      v-model:tableTotal="tableTotal"
      :deleteMode="deleteMode"
      @likeFun="likeFun"
      @replyFun="replyFun"
      @deleteFun="deleteFun"
    ></CComment>
  </scroll-view>

  <view class="btn" @tap="openComment">发表新评论</view>
</template>

<script setup>
import CComment from '@/components/cc-comment/cc-comment.vue'
import List from '@/pagesOrder/list/list.vue'
import {
  addGoodCommentAPI,
  deleteGoodCommentAPI,
  getGoodCommentsByIdAPI,
  getTableTotalAPI,
  likeCommentAPI,
} from '@/services/comments'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'

const query = defineProps({
  goodId: {
    type: String,
    require: true,
  },
})
//获取已经本地存储的用户信息
const user = JSON.parse(uni.getStorageSync('member')).profile.user
// 唤起新评论弹框
let ccRef = ref(null)
function openComment() {
  ccRef.value.newCommentFun()
}
//用于记录用户点赞了多少个不同的评论
const likeCommentList = ref([])
const addItemToList = (item) => {
  const index = likeCommentList.value.findIndex((factor) => factor.id === item.id)
  if (index !== -1) {
    likeCommentList.value[index].is_like = item.is_like
  } else {
    likeCommentList.value.push(item)
  }

  // console.log(likeCommentList.value)
}
// 点赞回调事件
function likeFun({ params }, callback) {
  console.log('likeFun', params.is_like)
  //处理用户点赞/修改过的数组
  const data = ({ user_id, id, is_like }) => ({ user_id, id, is_like })
  const res = data(params)
  addItemToList(res)
  //后端处理点赞事件
}
// 评论回调事件

async function replyFun({ params }, callback) {
  console.log('replyFun', params)
  // 当请求成功, 调用callback执行评论插入;
  // Demo如下:
  // axios.post("http://xxx/reply", { ...params }).then((res) => {
  //   if (res.code === 0) {
  //     callback(res);
  //   }
  // });
  //const res = { id: Math.random() } // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
  const res = await addGoodCommentAPI(params, query.goodId)
  if (res.code == 200) {
    callback(res)
  }
  //setTimeout(() => callback(res), 500) // 目前为了展示效果, 直接执行callback
}

/** 删除回调事件
 * mode 删除模式
 * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
 * -- all : 删除所有评论包括回复评论
 */
const deleteMode = ref('only')
async function deleteFun({ params, mode }, callback) {
  console.log('deleteFun', { params, mode })
  const res = await deleteGoodCommentAPI(params)
  if (res.code === 200) {
    callback(res)
  }
}

// ----模拟数据------模拟数据------模拟数据----
// 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
let myInfo = ref({
  user_id: user.id, // 用户id
  user_name: user.nickname, // 用户名
  user_avatar: user.avatar, // 用户头像地址
})
// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
let userInfo = ref({
  user_id: 2, // 用户id
  user_name: 'ikun', // 用户名
  user_avatar: 'https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp', // 用户头像地址
})
let tableTotal = ref(0) // 评论总数
//获取当前评论总数的api
const getTableTotalData = async () => {
  const res = await getTableTotalAPI(query.goodId)
  tableTotal.value = res.data
}
let tableData = ref([]) // 评论表
//获取当前商品的所有评论...
const getGoodCommentsByIdData = async () => {
  console.log(query.goodId)
  const res = await getGoodCommentsByIdAPI(query.goodId)
  tableData.value = res.data
}
onLoad(() => {
  getGoodCommentsByIdData()
  getTableTotalData()
})
onUnload(() => {
  //卸载组件->即用户返回其他页面的时候，提交点赞信息修改
  likeCommentAPI(likeCommentList.value)
})
</script>

<style lang="scss" scoped>
.btn {
  text-align: center;
  color: #fff;
  padding: 20rpx;
  margin: 50rpx;
  border-radius: 20rpx;
  background-color: #2979ff;
}
</style>
<!--

  {
    id: 120, // 评论id
    parent_id: null, // 评论父级的id
    reply_id: null, // 被回复评论的id
    reply_name: null, // 被回复人名称
    user_id: 2, // 用户id
    user_name: 'ikun', // 用户名
    user_avatar: 'https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp', // 用户头像地址
    user_content: '唱,跳,rap,篮球', // 用户评论内容
    is_like: false, // 用户是否点赞
    like_count: 120, // 点赞数统计
    create_time: '2025-02-19 09:16', // 创建时间
  },
  {
    id: 130,
    parent_id: 120, // 评论父级的id
    reply_id: 120, // 被回复评论的id
    reply_name: 'ikun', // 被回复人名称
    user_id: 3, // 用户id
    user_name: '小黑子', // 用户名
    user_avatar: 'https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp', // 用户头像地址
    user_content: '姬霓太美~祝自己生日快乐~~', // 用户评论内容
    is_like: false, // 用户是否点赞
    like_count: 67, // 点赞数统计
    create_time: '2025-03-07 00:06', // 创建时间
  },
  {
    id: 140,
    parent_id: 120, // 评论父级的id
    reply_id: 130, // 被回复评论的id
    reply_name: '小黑子', // 被回复人名称
    user_id: 4, // 用户id
    user_name: '守护宗主维护宗门', // 用户名
    user_avatar: 'https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp', // 用户头像地址
    user_content: '你露出鸡脚了', // 用户评论内容
    is_like: false, // 用户是否点赞
    like_count: 16, // 点赞数统计
    create_time: '2025-05-10 17:08', // 创建时间
  },
  {
    id: 150,
    parent_id: null, // 评论父级的id
    reply_id: null, // 被回复评论的id
    reply_name: null, // 被回复人名称
    user_id: 5, // 用户id
    user_name: '音乐制作人', // 用户名
    user_avatar: 'https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp', // 用户头像地址
    user_content:
      '只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化', // 用户评论内容
    is_like: true, // 用户是否点赞
    like_count: 8, // 点赞数统计
    create_time: '2025-12-21 00:45', // 创建时间
  },
-->
